<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>角色</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"/>
	<style type="text/css">
		body {
			overflow-y: scroll;
		}

		.demoTable {
			width: 80%;
			height: 50px;
			margin: 0 auto;
			text-align: center
		}
	</style>

</head>
<body style="margin: 20px;">

<div class="demoTable">
	搜索角色：
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload" autocomplete="off">
	</div>
	<button class="layui-btn layui-btn-sm layui-bg-blue" data-type="reload" id="">搜索</button>
	<!--	<div class="layui-btn layui-btn-sm layui-bg-blue">-->
	<!--		<a href="javascript:0;" class="btn" style="color: white">添加</a>-->
	<!--	</div>-->
</div>


<table class="layui-hide" id="role" lay-filter="role"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中角色</button>
		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="add">添加</button>
<!--		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="findAll" onclick="history.go(0)">查看全部</button>-->
		<button class="layui-inline layui-btn layui-btn-primary layui-btn-sm btn" lay-event="refresh"
				onclick="history.go(0)" style="width: 30px;height: 30px">
			<i class="layui-icon layui-icon-refresh-3" style="color: #0000FF;padding: 3px 0 0 1px"></i></button>

	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs layui-bg-green" lay-event="give">角色权限管理</a>
	<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>

<script>
	function createTime(v){
		var date=new Date(v);
		var y=date.getFullYear();
		var m=date.getMonth();
		m=m<10?'0'+m:m;
		var d=date.getDate();
		d=d<10?'0'+d:d;
		var h=date.getHours();
		h=h<10?'0'+h:h;
		var min=date.getMinutes();
		min=min<10?'0'+min:min;
		var sec=date.getSeconds();
		sec=sec<10?'0'+sec:sec;
		var str=y+"-"+m+"-"+d+" "+h+":"+min+":"+sec;
		return str;
	}

	layui.use('table', function () {
		var table = layui.table;
		table.render({
			elem: '#role'
			, url: 'http://localhost:8080/crm/role/findAll'
			, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			, height: 450
			, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示'
				, layEvent: 'LAYTABLE_TIPS'
				, icon: 'layui-icon-tips'
			}]
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			, cols: [[
				{type: 'checkbox', fixed: 'left'}
				, {field: 'id', title: '编号', fixed: true, width: 100}
				, {field: 'roleName', title: '角色名称', fixed: true, width: 150}
				, {field: 'roleRemarker', title: '角色备注', fixed: true,width: 350}
				, {field: 'isValid', title: '是否可用',  width: 150}
				,{field: 'createDate', title: '创建时间', sort: true,templet:function (row) {
						return createTime(row.createDate);
					}}
				, {title: '操作', toolbar: '#barDemo',  fixed: 'right'}
			]]
			, id: 'testReload'
			, page: true
			, done: function (res, curr, count, status) {
				layer.msg("操作成功，共查询到 " + count + " 个角色信息");
			}
		});


		//查找id
		var active = {
			reload: function () {
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page: {
						curr: 1 //重新从第 1 页开始
					}
					, where: {
						key: demoReload.val()
					}
				}, 'data');
			}
		};

		$('.demoTable .layui-btn').on('click', function () {
			console.log("okkk")
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		})

		//回车键搜索
		$('#demoReload').on('keypress',function () {
			var type = $('.demoTable .layui-btn').data('type');
			active[type] ? active[type].call(this) : '';
		})

		// 头工具栏事件
		table.on('toolbar(role)', function (obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					console.log(data)
					// layer.alert(JSON.stringify(data));
					layer.confirm('真的删除行么', function (index) {
						// obj.del();
						layer.close(index);
						//向后台发送ajax请求
						$.ajax({
							//编写json格式，设置属性和值
							url: "http://localhost:8080/crm/role/deleteMany",
							contentType: "application/json;charset=utf-8",
							data:JSON.stringify(data),
							dataType: "text",
							type: "post",
							success: function (data) {
								//服务器端成功响应的json数据，进行解析
								console.log(data)
							}
						})
						//返回首页
						history.go(0)
					});
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'add':
					layer.open({
						type: 2,
						title: '<h1 style="font-size: 25px;text-align: center">添加角色</h1>',
						shadeClose: true,
						shade: 0.6,
						area: ['1100px', '75%'],
						shadowColor: false,
						content: 'RoleForm.html',
						yes: function(index, layero){
							//do something

						},
					});
					break;

					//自定义头工具栏右侧图标 - 提示
				case 'LAYTABLE_TIPS':
					layer.alert('这是工具栏右侧自定义的一个图标按钮');
					break;
			}
			;
		});

		//监听行工具事件
		table.on('tool(role)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				console.log("操作：" + obj.event);
				layer.confirm('真的删除行么', function (index) {
					// obj.del();
					layer.close(index);
					//向后台发送ajax请求
					$.ajax({
						//编写json格式，设置属性和值
						url: "http://localhost:8080/crm/role/delete?id=" + data.id,
						contentType: "application/json;charset=utf-8",
						dataType: "text",
						type: "post",
						success: function (data) {
							//服务器端成功响应的json数据，进行解析
						}
					})
					//返回首页
					history.go(0)
				});
			} else if (obj.event === 'edit') {
				console.log("操作：" + obj.event);
				// layer.prompt({
				// 	formType: 2
				// 	,value: data.email
				// }, function(value, index){
				// 	obj.update({
				// 		email: value
				// 	});
				// 	layer.close(index);
				// });
				layer.open({
					type: 2,
					title: '<h1 style="font-size: 25px;text-align: center">编辑角色</h1>',
					shadeClose: true,
					shade: 0.6,
					area: ['1100px', '75%'],
					shadowColor: false,
					content: 'RoleForm.html',
					success: function (layero, index) {
						//方法一：body.html() body里面的内容
						var body = layer.getChildFrame('body', index);
						body.find('#roleName').val(data.roleName);
						body.find('#roleRemarker').val(data.roleRemarker);
						body.find('.isValid').val(data.isValid);
						//给id赋值
						body.find('#id').val(data.id);
					}
				});
			} else if (obj.event === 'give') {
				console.log("操作：" + obj.event);
				layer.open({
					type: 2,
					title: '<h1 style="font-size: 25px;text-align: center">管理角色权限关系</h1>',
					shadeClose: true,
					shade: 0.6,
					area: ['1100px', '75%'],
					shadowColor: false,
					content: 'RolePermission.html',
					success: function (layero, index) {
						//方法一：body.html() body里面的内容
						var body = layer.getChildFrame('body', index);
						//给id赋值
						body.find('#id').val(data.id);
					}
				})
			}
		});
	});
</script>

</body>
</html>
